<template>
  <div :class="{'folded':a}">
    <Header></Header>
    <el-container>
      <Aside></Aside>
      <Main></Main>
    </el-container>
  </div>
</template>

<script>
import Header from "./components/Header";
import Aside from "./components/Aside";
import Main from "./components/Main";
import emitter from "./utils/bus";

export default {
  components: {Main, Aside, Header},
  data() {
    return {
      a: false
    }
  },
  mounted() {
    emitter.on('doCollapse', () => {
      this.a = !this.a
    })
  }
}
</script>

<style lang="scss">
.folded .aside {
  width: 64px !important;
}
</style>